<script setup lang="ts">
	import { computed, reactive, ref, unref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useLocation } from '@/hooks/web/useLocation'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { useUserStore } from '@/stores/user'
	import { orderLists, cancelOrder } from '@/package_saleman/api/List'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const { getLocation } = useLocation()

	onShow(() => {
		paging.value?.reload()
	})

	const useTabs = () => {
		const currentIndex = ref(0)

		const tabsColumns = computed(() => {
			return [
				{
					name: "全部",
					id: 0
				},
				{
					name: "待审核",
					id: 1
				},
				{
					name: "待出库",
					id: 2
				},
				{
					name: "待签收",
					id: 3
				},
				{
					name: "已完成",
					id: 4
				},
				{
					name: '已取消',
					badge: { value: taskInfo.value.done },
					id: 5
				}
			]
		})

		const taskInfo = ref({
			undone: 0,
			done: 0
		})

		const currentTabsItem = computed(() => {
			return unref(tabsColumns)[unref(currentIndex)]
		})

		return {
			currentIndex,
			tabsColumns,
			currentTabsItem,
			taskInfo
		}
	}
	const { tabsColumns, currentIndex, taskInfo, currentTabsItem } = useTabs()

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const dataList = ref([])
		const query = ref({
			order_no: '',
			order_type: '',
			transfer_mode: '',
			create_time: '',
			id: ''
		})

		const getList : ZPagingEvent.Query = async (page, limit) => {
			const params = { page, limit, status: unref(currentTabsItem).id, ...query.value, type: 1 }
			try {
				const res = await orderLists(params)
				taskInfo.value.done = res.data.success_num
				taskInfo.value.undone = res.data.wait_num
				paging.value?.complete([...res.data.data])
			} catch (err) {
				showNotify({
					type: 'error',
					message: err.msg
				})
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,
			query
		}
	}
	const { dataList, getList, searchAction, query } = useCURD()

	// 取消订单
	const cancellation = async (id : number) => {
		try {
			const val = await cancelOrder({ id: id, field: 'status', value: '5' })
			showNotify({
				type: 'success',
				message: val.msg
			})
			paging.value?.reload()
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
		}
	}
	// 查看详情
	const toStoreDetail = (item) => {
		route({
			url: 'package_saleman/pages/visitGoods/detail',
			params: {
				id: item.id,
				name: item.name
			}
		})
	}
	// 回库新增
	const toPage = () => {
		route({
			url: 'package_saleman/pages/transfer/createTransfer'
		})
	}
	// tabs切换
	const onSearch = () => {
		query.value.order_no = ''
		paging.value?.reload()

	}
	// 返回
	const leftClick = () => {
		uni.reLaunch({
			url: `/pages/Workbench/index`
		})
	}
	// 手机物理返回
	const isShow = ref(true)
	const beforeleave = () => {
		isShow.value = false
		uni.reLaunch({
			url: `/pages/Workbench/index`
		})
	}
	const filterShow = ref(false)
	const rangeTags = [{
		title: '全部',
		value: 0
	}, {
		title: '销售单',
		value: 1
	}, {
		title: '退货单',
		value: 2
	}]
	// 定义当前选中的标签
	const currentTag = ref(0);
	const rangeTags1 = [
		{
			title: "全部",
			value: 0
		},
		{
			title: "待审核",
			value: 1
		},
		{
			title: "待出库",
			value: 2
		},
		{
			title: "待签收",
			value: 3
		},
		{
			title: "已完成",
			value: 4
		}]
	const rangeTags2 = [{
		title: '全部',
		value: 0
	}, {
		title: '司机配送',
		value: 1
	}, {
		title: '门店自提',
		value: 2
	}]
	// 定义当前选中的标签
	const currentTag1 = ref(0);
	const currentTag2 = ref(0)
	// 选择标签的函数
	const selectTag = (value : any) => {
		currentTag.value = value;
		query.value.order_type = value
	};
	// 选择标签的函数
	const selectTag1 = (value : any) => {
		currentTag1.value = value;
		unref(currentTabsItem).id = value
	};
	const selectTag2 = (value : number) => {
		currentTag2.value = value;
		// query.value.
	}
	const filterClose = () => {
		filterShow.value = false
		paging.value?.reload()
	}
	const timeShow = ref(false)
	const timeConfirm = (e) => {
		console.log(e)
	}
	const mode = ref('range')
	const datetimePickerRef = ref(null);

	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	};
	const createUp = ref(false)
	const createForm = reactive({
		transType: ''
	})

	// 方法  
	const transTypeSelect = (item) => {
		console.log(item);
	};
	const payType = {
		1: '现结',
		2: '公司账户',
		3: '预存款'
	}
</script>

<template>
	<up-navbar title="访销单" placeholder @leftClick="leftClick"></up-navbar>
	<view v-if="isShow">
		<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
	</view>
	<view class="content">
		<view class="user_info_wrap">
			<view class="search-area">
				<view class="search-wrap">
					<up-search v-model="query.order_no" @search="searchAction" @custom="searchAction"
						@clear="searchAction" showAction actionText="搜索" animation shape="square"
						bgColor="rgba(243, 242, 245, 1)"></up-search>
				</view>
				<view class="filter-right" @click="filterShow = true">
					<image src="/package_saleman/static/img/filter.png" mode="aspectFit"></image>
					打开筛选
				</view>
			</view>


			<view class="user-info">
				<view class="avatar-wrap">
					<up-tabs v-model:current="currentIndex" @change="onSearch" :list="tabsColumns"
						:itemStyle="{ height: '104rpx', fontSize: '28rpx' }"
						:activeStyle="{ color: 'rgba(54, 116, 242, 1)' }" lineWidth="104rpx"
						lineColor=" rgba(54, 116, 242, 1)">
					</up-tabs>
				</view>
			</view>
		</view>
		<view class="main">
			<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 400rpx)">
				<view class="main-box" v-for="(item,index) in dataList" :key="index">
					<view class="main-header">
						<view class="header-name">{{item.store.store_name}}
						</view>
						<view class="header-right">
						</view>
					</view>
					<view class="main-tags">
						<view class="tags-name">
							<view class="type1" v-if="item.order_type == 1">
								访销单
							</view>
							<view class="type2" v-else>
								退货单
							</view>
						</view>
						<view class="distance-name">
							<span>单据日期</span>
							<span>{{item.create_time}}</span>

						</view>
					</view>
					<view class="line">
					</view>
					<view class="content-box" @click="toStoreDetail(item)">
						<view class="dd-box">
							<view class="dd">
								<text class="dd-name">订单编号： </text>
								<text>{{item.no}}</text>
							</view>
							<view class="dd">
								<text class="dd-name">订单金额：</text>
								<text>{{item.order_total_price}}</text>
							</view>
							<view class="dd">
								<text class="dd-name">支付方式：</text>
								<text>{{payType[item.payment_type]}}</text>
							</view>
							<!-- <view class="dd">
								<text class="dd-name">配送方式：</text>
								<text>司机配送</text>
							</view> -->
							<view class="dd">
								<text class="dd-name">备注：</text>
								<text>{{item.remark}}</text>
							</view>
						</view>
						<!-- <view class="box-right">
							<image src="/package_saleman/static/img/checking.png" mode="aspectFit"></image>
						</view> -->
					</view>
					<view class="goods-button" v-if="item.status === 1" @click="cancellation(item.id)">取消订单</view>
					<!-- <view class="footer-button">
						<up-button type="primary" size="large" text="再来一单" @click="toPage"></up-button>
					</view> -->
				</view>
			</z-paging>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
	<up-popup v-model:show="filterShow" mode="bottom" :round="10" :customStyle="{height: '75vh',padding: '36rpx'}">
		<view class="bottom-header">
			<span>选择时间</span>
			<view class="">
				<uni-datetime-picker v-model="query.create_time" type="daterange" @maskClick="timeShow=false" />
			</view>

			<!-- <view class="tag-container">
				<view v-for="tag in rangeTags" :key="tag.value"
					:class="{ tag: true, selected: currentTag === tag.value }" @click="selectTag(tag.value)">
					{{ tag.title }}
				</view>
			</view> -->
		</view>
		<view class="bottom-header">
			类型
			<view class="tag-container">
				<view v-for="tag in rangeTags" :key="tag.value"
					:class="{ tag: true, selected: currentTag === tag.value }" @click="selectTag(tag.value)">
					{{ tag.title }}
				</view>
			</view>
		</view>
		<view class="bottom-header">
			状态
			<view class="tag-container">
				<view v-for="tag in rangeTags1" :key="tag.value"
					:class="{ tag: true, selected: currentTag1 === tag.value }" @click="selectTag1(tag.value)">
					{{ tag.title }}
				</view>
			</view>
		</view>
		<!-- <view class="bottom-header">
			配送方式
			<view class="tag-container">
				<view v-for="tag in rangeTags2" :key="tag.value"
					:class="{ tag:true, selected: currentTag2 === tag.value}" @click="selectTag2(tag.value)">
					{{ tag.title }}
				</view>
			</view>
		</view> -->
		<view class="fixed-button">
			<up-button type="primary" size="large" text="确定" @click="filterClose"></up-button>
		</view>
	</up-popup>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		background: rgba(242, 243, 245, 1);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS 11.2及以上 */

	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 209rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;

		.search-area {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-wrap {
				display: flex;
				flex: 2;
				align-items: center;
				width: 100%;
				height: 64rpx;
				border-radius: 20rpx;
				padding: 10rpx;
				background: rgba(243, 242, 245, 1);
			}

			.filter-right {
				display: flex;
				align-items: center;
				justify-content: space-around;
				color: #fff;
				margin-left: 12rpx;
				padding: 0 24rpx;
				height: 72rpx;
				border-radius: 12rpx;
				flex: 1;
				background-color: rgba(15, 127, 255, 1);

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}


	}

	.main {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS 11.2及以上 */

		.main-box {
			width: 702rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 24rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.main-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}

				.header-right {
					display: flex;

					.right-img {
						width: 34rpx;
						height: 34rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.right-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(55, 131, 252, 1);
					}
				}
			}

			.main-tags {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.tags-name {
					display: flex;
					font-size: 24rpx;

					// font-weight: 500;
					.type1 {
						border-radius: 2px;
						padding: 6rpx;
						height: 30rpx;
						border: 1px solid rgba(15, 127, 255, 1);
						color: rgba(15, 127, 255, 1);
					}

					.type2 {
						margin-left: 12rpx;
						border-radius: 2px;
						padding: 6rpx;
						height: 30rpx;
						border: 1px solid rgba(255, 84, 84, 1);
						color: rgba(255, 84, 84, 1);
					}
				}

				.distance-name {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: start;
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(156, 154, 161, 1);
				}
			}

			.line {
				margin-top: 20rpx;
				width: 600rpx;
				height: 0;
				border: 1px solid rgba(0, 0, 0, 0.1);
			}

			.content-box {
				display: flex;
				justify-content: space-around;
				padding: 6rpx;

				.dd-box {
					display: flex;
					flex-direction: column;
					flex: 3;
					width: 654rpx;
					border-radius: 6rpx;
					margin-top: 10rpx;
					padding: 16rpx;
					box-sizing: border-box;

					.dd {
						display: flex;
						margin-bottom: 20rpx;

						.dd-img {
							width: 40rpx;
							height: 40rpx;
							vertical-align: middle;
							margin-right: 20rpx;
						}

						.dd-name {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(100, 101, 102, 1);
						}
					}
				}

				.box-right {
					display: flex;
					flex: 1;
					position: relative;
					top: 120rpx;

					image {
						height: 210rpx;
						width: 210rpx;
					}
				}
			}

			.goods-button {
				width: 654rpx;
				height: 80rpx;
				border-radius: 1084rpx;
				background: rgba(242, 243, 245, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
				text-align: center;
				line-height: 80rpx;
			}
		}
	}

	.bottom-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin: 20rpx 0;

		.tag-container {
			display: flex;
			font-size: 24rpx;
			color: rgba(155, 157, 158, 1);
			// justify-content: space-between;

			.tag {
				padding: 16rpx;
				margin-left: 20rpx;
				border-radius: 6rpx;
				// background-color: rgba(240, 240, 240, 1);
				border: 1px solid rgba(240, 240, 240, 1);

				&.selected {
					background: rgba(15, 127, 255, 0.1);
					border: 1px solid rgba(15, 127, 255, 1);
					color: rgba(15, 127, 255, 1);
				}
			}
		}
	}

	.fixed-button {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 40rpx);
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
		display: flex;
		padding: 36rpx 0;
		justify-content: center;
		align-items: center;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1 1 0% !important;
		background-color: #fff;
	}
</style>